Hello and welcome to this lecture.
In this lecture we'll be looking at coordinates.
It's important to understand how coordinates work in Noin how to manipulate the hastier mail campus
on the screen.
I have caught a basic illustration of that coordinate with the coordinates you quote like x axis and
then you've got the White House is going down just as you for a moment.
This is a campus where you are drawing on the canvas.
You need to specify a way on the x and y axes you want the drawing to begin from in this illustration.
The drawing will start from zero.
So the Y an x axis have met and the point zero.
So if you draw any For example we've drawn this way it will start from where the green dot is and then
specifying the values in it.
So to make it easier to explain let me show you an actual graphic that I drew using the Cambers element
and Javascript.
This is a compass.
The green part here and the black graphic here is he rectangle.
What is square is a square has been drawn in become this element so to illustrate how the coordinate
works.
Look at this code here.
This is just a compass function that will fill the covers saw.
These are the parameters for this function.
What this is saying is that is telling you where you want the drawing of the canvas to start from.
So there's 30 in the that on the x axis I want you to start from 30 to 2 pixels from the X and then
30 from the Y.
So the 30 here going this way is the X and then down is the y axis and then once you specify the where
it all start on the x and y then you can start specifying the value.
So this here now is the outer rule with this square.
This is the height of the square by the first two values.
Specify where on the x axis you want to start the drawing from the y axis.
So I specified 30 pixels so you can think of each as the pixel within the canvas.
So start from 30 you can specify any value.
If you wanted to start from zero on zero.
As I explained in the grampy if you wanted to start from that you would need to.
If I specified this value a 0 0 that means the canvas will actually start from the very edge here so
there would be no gap.
It will start from the very point here right at the top so that means that you want it to start where
the x and y axis meet.
But if you want more spacing like I've done here you can specify different values on the x axis on the
White House's for the Droid to begin.
So this is how coordinates work.
So in your work with the canvas element you'll be seen a lot of these coordinated values.
Of course you need to specify where you want the drawing to start from on the x axis and on the y axis.
So that's basically how coordinates work.
In this lecture we had a brief illustration of how the x and y coordinates work in relationship to the
canvas you identify identifying where you want the canvas drawing to start from on the X and on the
y axis.
Thank you so much for watching.
Bye for now.